<!--  -->
<template>
    <div>
<!--内容-->
<div class="m-container animated fadeIn">
    <div class="ui container m-pad-tb-big m-opacity">
        <div class="ui segment ">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h4 class="ui teal header">搜索结果</h4>
                </div>
                <div class="right aligned column">
                    共 <h3 class="ui orange header m-inline-block m-text-thin">{{blogs.total}}</h3> 个
                </div>
            </div>
        </div>
        <!--content-->
        <div class="ui padded segment m-pad-tb-large m-pad-lr-large" v-for="blog in blogs.list" :key="blog.id">
            <div class="ui grid stackable mobile reversed">
                <div class="nine wide column" >
                    <h3 class="ui header m-text-large" ><router-link class="m-a-head" :to="'/blog/'+blog.id">{{blog.title}}</router-link></h3>
                    <p class="m-text">{{blog.description+"..."}}</p>
                    <div class="ui grid ">
                        <div class="eleven wide column">
                            <div class="ui horizontal link list">
                                <div class="item">
                                    <i class="calendar icon"></i><span>{{blog.updateTime | formatDate("YYYY-MM-DD")}}</span>
                                </div>
                                <div class="item">
                                    <i class="eye icon"></i><span>{{blog.views}}</span>
                                </div>
                                <div class="item">
                                    <i class="comment outline icon"></i><span>{{blog.commentCount}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="five wide column right aligned ">
                            <div class="ui label teal basic m-text-thin">{{blog.type.name}}</div>
                        </div>
                    </div>
                </div>

                <div class="seven wide column middle aligned ">
                    <router-link :to="'/blog/'+blog.id"><img src="../../assets/images/14.png"  class="ui rounded image"></router-link>
                </div>
            </div>
        </div>

        <!--footer-->
        <div class="ui bottom attached segment ">
            <div class="ui center aligned middle aligned grid stackable">
                <div class="four wide column">
                    <button class="ui button teal basic" @click="getSearchBlog(blogs.pageNum-1)" v-if="!blogs.isFirstPage">上一页</button>
                </div>

                <div class="eight wide column">
                    <p class="m-text-spaced-max">{{blogs.pageNum}}/{{blogs.pages}}</p>
                </div>

                <div class="four wide column">
                    <button class="ui button teal basic" @click="getSearchBlog(blogs.pageNum+1)" v-if="!blogs.isLastPage">下一页</button>
                </div>
            </div>
        </div>
    </div>
</div>

<br>
<br>
<br>

    </div>
</template>

<script>
export default {
    data () {
        return {
            ImgDomainName:this.$ImgDomainName
        };
    },
    computed:{
        keyword(){
            return this.$store.state.keyword
        },
        blogs(){
            return this.$store.state.blogs
        }
    },
    methods:{
        getSearchBlog(pageNum){
            var _this = this
            _this.axios.get("/searchShowBlogs",{
                params:{
                    pageNum:pageNum,
                    keyword:_this.keyword
                }
            }).then(res=>{
                $(window).scrollTo(0);
                _this.$store.commit("setBlogs",res.data.pageInfo)
            }).catch(e=>{
                console.log(e)
            })
        }
    },
    created(){
        //若blogs为空，初始化时请求blogs
        if(this.blogs==""){
            this.getSearchBlog(1)
        }
    }
}

</script>
<style lang='scss' scoped>
</style>